<template>
	<view class="worker-detail">
		<div class="statusBar" :style="{
			height:`${statusBarHeight}px`
		}"></div>
		<view class="title-box" :style="{top:`${statusBarHeight}px`,height:`${topHeight}px`,padding:`${capsulePadding}px ${pagePadding}px`}">
			<view class="page-title">
				<i class="clearIcon" @click="goBack"></i>{{pageTitle}}
			</view>
		</view>
		<div :style="{
			height:`${statusBarHeight + topHeight}px`
		}"></div>
		<u-gap height="20rpx"></u-gap>
		<view class="detail-cell">
			<text>工单类型</text>
			<text>{{detailData.workOrderTypeName}}</text>
		</view>
		<view class="detail-cell">
			<text>工单编号</text>
			<text>{{detailData.workOrderNo}}</text>
		</view>
		<view class="detail-cell">
			<text>客户名称</text>
			<text>{{detailData.consName}}</text>
		</view>
		<view class="detail-cell">
			<text>客户户号</text>
			<text>{{detailData.consNo}}</text>
		</view>
		<view class="detail-cell">
			<text>联系人</text>
			<text>{{detailData.consUserName}}</text>
		</view>
		<view class="detail-cell">
			<text>联系方式</text>
			<text>{{detailData.consTel}}</text>
		</view>
		<view class="detail-cell">
			<text>楼宇名称</text>
			<text>{{detailData.buildName}}</text>
		</view>
		<view class="detail-cell">
			<text>楼宇编号</text>
			<text>{{detailData.buildCode}}</text>
		</view>
		<view class="detail-cell">
			<text>所属地市</text>
			<text>{{detailData.mgtOrgName}}</text>
		</view>
		<view class="detail-cell">
			<text>工单等级</text>
			<text>{{detailData.workOrderLevelName}}</text>
		</view>
		<view class="detail-cell">
			<text>巡查类型</text>
			<text>{{detailData.patrolTypeName}}</text>
		</view>
		<view class="detail-cell">
			<text>工单派发人</text>
			<text>{{detailData.getUserName}}</text>
		</view>
		<view class="detail-cell">
			<text>工单派发时间</text>
			<text>{{timeFormat(detailData.getDate, 'yyyy-mm-dd hh:MM:ss')}}</text>
		</view>
		<view class="detail-cell">
			<text>工单负责人</text>
			<text>{{detailData.respUserName}}</text>
		</view>
		<view class="detail-cell">
			<text>巡查开始时间</text>
			<text>{{timeFormat(detailData.planStartDate, 'yyyy-mm-dd hh:MM:ss')}}</text>
		</view>
		<view class="detail-cell">
			<text>预计完成时间</text>
			<text>{{timeFormat(detailData.planFinishDate, 'yyyy-mm-dd hh:MM:ss')}}</text>
		</view>
		<view class="detail-cell">
			<text>工单状态</text>
			<text>{{detailData.workOrderStatusName}}</text>
		</view>
		<view class="detail-cell">
			<text>当前环节</text>
			<text>{{detailData.stepTypeName}}</text>
		</view>
		<view class="detail-desc">
			<text>工单描述</text>
			<view class="desc">{{detailData.content}}</view>
		</view>
		<u-tabs class="u-margin-bottom-20" :scrollable="false" :list="tabs" :activeStyle="{ color: '#014d99' }"
			:nactiveStyle="{ color: '#555555' }" lineColor="#014d99" @click="tabsClick"></u-tabs>
		<view class="detail-title">
			工单环节信息
		</view>
		<view class="detail-cell">
			<text>负责人</text>
			<text>{{curLCData.respUserName}}</text>
		</view>
		<view class="detail-cell">
			<text>联系方式</text>
			<text>{{curLCData.respTel}}</text>
		</view>
		<!--  -->
		<view v-if="curTab === '归档'" class="detail-desc">
			<text>主动召测截图</text>
			<view class="desc">
				<image :src="curLCData.imgUrl" mode=""></image>
			</view>
		</view>
		<!-- 运维确认没有备注 -->
		<view v-if="curTab != '运维确认' && curTab != '抢修确认'" class="detail-desc">
			<text>备注</text>
			<view class="desc">{{curLCData.remarks}}</view>
		</view>
		<!-- 抢修确认 -->
		<view v-if="curTab === '抢修确认'" class="detail-desc">
			<text>抢修内容</text>
			<view class="desc">{{curLCData.remarks}}</view>
		</view>
		<!--  -->
		<view v-if="curTab === '运维确认'" class="detail-cell">
			<text>维修厂家</text>
			<text>{{curLCData.repairFactory}}</text>
		</view>
		<view v-if="curTab === '运维确认'" class="detail-cell">
			<text>维修人员</text>
			<text>{{curLCData.repairPerson}}</text>
		</view>
		<view v-if="curTab === '运维确认'" class="detail-cell">
			<text>厂家联系方式</text>
			<text>{{curLCData.factoryTel}}</text>
		</view>
		<view v-if="curTab === '运维确认'" class="detail-desc">
			<text>厂家诊断结果</text>
			<view class="desc">{{curLCData.factoryReason}}</view>
		</view>
		<view v-if="curTab === '运维确认'" class="detail-desc">
			<text>故障处理结果</text>
			<view class="desc">{{curLCData.remarks}}</view>
		</view>
		<view v-if="curTab === '运维确认' || curTab === '抢修确认'" class="detail-desc">
			<text>处理后设备照片</text>
			<view class="desc">
				<image :src="curLCData.imgUrl" mode=""></image>
			</view>
		</view>
		<view v-if="curTab === '到达现场'" class="detail-desc">
			<text>现场图片</text>
			<view class="desc">
				<image :src="curLCData.imgUrl" mode=""></image>
			</view>
		</view>
		<!--  -->
		<view v-if="curTab === '异常确认'" class="detail-desc">
			<text>故障设备照片</text>
			<view class="desc">
				<image :src="curLCData.imgUrl" mode=""></image>
			</view>
		</view>
		<view v-if="curTab === '抢修确认'" class="detail-desc">
			<text class="u-margin-bottom-20">更换设备清单</text>
			<view class="card" >
				<view class="table-box">
					<view class="table-h">
						<view class="table-h_cell">
							设备类型
						</view>
						<view class="table-h_cell">
							是否更换
						</view>
						<view class="table-h_cell">
							更换SN号
						</view>
					</view>
					<view style="height: 80rpx"></view>
					<!-- for循环加载列表数据 -->
					<view class="table-b" v-for="(item,index) in curLCData.alcmRepairRecordDOList" :key="index">
						<view class="table-b_cell">
							{{item.workEquipName}}
						</view>
						<view class="table-b_cell">
							{{item.replaceStatus === '0' ? '是' : '否'}}
						</view>
						<view class="table-b_cell">
							{{item.devSn}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="curTab === '巡查确认'" class="detail-desc">
			<text class="u-margin-bottom-20">巡查清单</text>
			<view class="card">
				<view class="table-box">
					<view class="table-h">
						<view class="table-h_cell">
							巡查事项
						</view>
						<view class="table-h_cell">
							巡查结果
						</view>
						<view class="table-h_cell">
							巡查图片
						</view>
					</view>
					<view style="height: 80rpx"></view>
					<!-- for循环加载列表数据 -->
					<view class="table-b" v-for="(item,index) in curLCData.alcmPatrolRecordDOList" :key="index">
						<view class="table-b_cell">
							{{item.patrolItemName}}
						</view>
						<view class="table-b_cell">
							{{item.patrolCotentStr}}
						</view>
						<view class="table-b_cell text-blue" >
							<span class="text-blue" v-if="item.imgUrl" @click="viewImg(item.imgUrl)">预览</span>
						</view>
					</view>	
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance
	} from "vue";
	import { timeFormat } from '@/uni_modules/uview-plus';
	import config from '@/common/config'
	const {
		proxy
	} = getCurrentInstance();
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const capsulePadding = ref(0);
	const pagePadding = ref(0);
	const pageTitle = ref('工单详情')
	// 处理页面跳转
	const goBack = (type) => {
		uni.navigateBack()
	}
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度
		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
		capsulePadding.value = res.top - statusBarHeight.value
	});
	const tabs = ref([])
	const curTab = ref('派单')
	const workOrderType = ref('')
	onLoad((options) => {
		console.log(options); // 123
		workOrderId.value = options.workOrderId
		workOrderType.value = options.workOrderType
		// 1：巡查工单，2：抢修工单，3：特殊工单
		if(workOrderType.value === '1'){
			tabs.value = [
				{
					name: '派单',
				}, {
					name: '接单',
				}, {
					name: '到达现场'
				}, {
					name: '巡查确认'
				}, {
					name: '回单'
				}, {
					name: '归档'
				},
			]
		}else if(workOrderType.value === '2'){
			tabs.value = [
				{
					name: '派单',
				}, {
					name: '接单',
				}, {
					name: '到达现场'
				}, {
					name: '异常确认'
				}, {
					name: '抢修确认'
				}, {
					name: '回单'
				}, {
					name: '归档'
				},
			]
		}else if(workOrderType.value === '3'){
			tabs.value = [
				{
					name: '派单',
				}, {
					name: '接单',
				}, {
					name: '到达现场'
				}, {
					name: '异常确认'
				}, {
					name: '运维确认'
				}, {
					name: '回单'
				}, {
					name: '归档'
				},
			]
		}
		getDetails()
	});
	const workOrderId = ref('')
	const detailData = ref({})
	const getDetails = async () => {
		const res = await proxy.$http.POST('/aom/wechat/queryCommon',{
			obj:{
				workOrderId:workOrderId.value
			},
			url:"queryWorkOrder"
		})
		if (res.code === '00000') {
			detailData.value = res.data
			getLCData()
			tabsClick({
				name: '派单',
			})
		}
		console.log('res--------->',res)
	}
	const liuchengData = ref([])
	const getLCData = async () => {
		const res = await proxy.$http.POST('/aom/wechat/queryCommon',{
			obj:{
				"workOrderNo": detailData.value.workOrderNo
			},
			url:"queryWorkOrderStepDetailsListByWorkOrderNo"
		})
		if (res.code === '00000') {
			liuchengData.value = res.data
		}
		console.log("getLCData==========>",liuchengData.value)
	}
	const curLCData = ref({})
	const tabsClick = (item) => {
		curTab.value = item.name
		// 请求该流程详情
		const types = {
			"派单":"20",
			"接单":"30",
			"到达现场":"40",
			"异常确认":"50",
			"抢修确认":"60",
			"运维确认":"65",
			"巡查确认":"70",
			"回单":"80",
			"归档":"99",
		}
		console.log("getLCData==========>",liuchengData.value)
		curLCData.value = liuchengData.value && liuchengData.value.find(item => item.stepType == types[curTab.value]) || {}
		if (curLCData.value && curLCData.value.fileId && curLCData.value.fileId != '') {
			curLCData.value.imgUrl = config.baseURL + '/resources/download/downloadPhoto?uuid=' + curLCData.value.fileId + '&token=' + uni.getStorageSync('token');
		}
		if(curLCData.value.alcmPatrolRecordDOList){
			curLCData.value.alcmPatrolRecordDOList = curLCData.value.alcmPatrolRecordDOList.map(item =>{
				if(item.fileId){
					item.imgUrl = config.baseURL + '/resources/download/downloadPhoto?uuid=' + item.fileId + '&token=' + uni.getStorageSync('token')
				}
				return item
			})
		}
		console.log(curLCData.value)
	}
	
	const viewImg = (url) => {
		uni.previewImage({
			current: url,
			urls: [url],
		});
	}
</script>

<style scoped lang="scss">
	.worker-detail{
		background: #f1f1f1;
		// height: 100vh;
	}
	.detail-cell{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 30rpx 20rpx;
		font-size: 32rpx;
		border-bottom: 2px solid #ececec;
	}
	.detail-desc{
		background-color: #fff;
		padding: 30rpx 20rpx;
		font-size: 32rpx;
		border-bottom: 2px solid #ececec;
		.desc{
			margin-top: 20rpx;
			font-size: 28rpx;
			color:#999;
		}
	} 
	.detail-title{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding: 30rpx 20rpx;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	
	
	.card{
		width: 100%;
		padding: 40rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.table-box{
		width: 100%;
		// height: 400rpx;
		border-radius: 40rpx;
		overflow-y: auto;
		position: relative;
		.table-b{
			
			width: 100%;
			height: 80rpx;
			display: flex;
			
			 // 奇数行样式
			&:nth-child(odd) {
				background-color: rgba(47, 154, 255,0.07);
			}
			
			// 偶数行样式
			&:nth-child(even) {
				background-color: #fff;
			}
			&_cell{
				width: calc(33.33333%);
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.table-h{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 80rpx;
		background-color: rgba(47, 154, 255,0.2);
		display: flex;
		&_cell{
			width: calc(33.33333%);
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: $uni-color-project;
			font-size: 32rpx;
		}
	}
</style>
